<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <!-- 侧边栏 -->
    <Aside />

    <el-container>
      <!-- 顶栏 -->
      <el-header style="text-align: right">
        <div>
          <el-dropdown>
            <el-avatar :size="50">
              <img :src="avatar" />
            </el-avatar>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="doLoginOut"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div style="margin-left: 10px;">
            <el-breadcrumb :separator-icon="ArrowRight">    
              <el-breadcrumb-item v-for="(item,index) in route.matched" :key="index"><span style="font-size: 15px; font-weight: bold;">{{ item.meta.title }}</span></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </el-header>
      <!-- 主要展示区 -->
      <Main />
    </el-container>
  </el-container>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import router from "@/router";
import Aside from "../sidebar/Aside.vue";
import Main from "../main/Main.vue";
import { onMounted, ref } from "vue";
import { logout } from "@/api/user";
import { useTokenStore } from "@/stores/token";
import { useUserStore } from "@/stores/user";
import { useRoute } from "vue-router";
//解构出tokenStore
const tokenStore = useTokenStore();
const userStore = useUserStore();
const avatar = ref("");
const route = useRoute();
onMounted(() => {
  const user = userStore.user;
  avatar.value = user.avatar;
});

//方法区
function doLoginOut() {
  const user = userStore.user;
  logout(user.id).then((res) => {
    if (res.code === 200) {
      router.push("/");
      tokenStore.setAdmin(false);
      tokenStore.removeToken();
      userStore.removeUserInfo();
    }
  });
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: #ffffff;
  color: var(--el-text-color-primary);
  padding: 0;
  height: 80px;
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background-color: rgb(48, 65, 86);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
  background-color: #ffff;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

/* 头像 */
.el-avatar {
  margin-top: 5px;
  margin-right: 30px;
}
</style>
